<template>
  <div class="definition-detail app-page">
    <div class="page-header">
      <div class="header-left">
        <el-button class="back-btn" text circle @click="goList">
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <h2 class="app-section-title">参数详情</h2>
      </div>
    </div>

    <!-- 桌面端使用描述列表 -->
    <div class="desktop-only">
      <el-card shadow="never" style="margin-bottom: 16px">
        <template #header>
          <div style="display:flex;justify-content:space-between;align-items:center">
            <span>参数基础信息</span>
            <el-button type="primary" @click="goValues" size="small">配置参数值</el-button>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="参数Key">{{ detail.paramKey }}</el-descriptions-item>
          <el-descriptions-item label="参数名称">{{ detail.paramName }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{ detail.paramType }}</el-descriptions-item>
          <el-descriptions-item label="分类">{{ detail.categoryName }}</el-descriptions-item>
          <el-descriptions-item label="当前值">{{ detail.currentValue }}</el-descriptions-item>
          <el-descriptions-item label="默认值">{{ detail.defaultValue }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">{{ detail.description }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card shadow="never" v-if="Array.isArray(detail.environmentValues)">
        <template #header>
          <div class="card-header">不同环境的参数值</div>
        </template>
        <el-table :data="detail.environmentValues" border>
          <el-table-column prop="environment" label="环境" width="120" />
          <el-table-column prop="value" label="值" min-width="180" />
          <el-table-column prop="isActive" label="启用" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.isActive ? 'success' : 'info'">{{ scope.row.isActive ? '是' : '否' }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 移动端使用卡片布局 -->
    <div class="mobile-only">
      <!-- 基本信息卡片 -->
      <div class="detail-card">
        <h3 class="card-title">基本信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">参数Key</span>
            <span class="detail-value key-value">{{ detail.paramKey }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">参数名称</span>
            <span class="detail-value">{{ detail.paramName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">类型</span>
            <el-tag size="small" type="info">{{ detail.paramType }}</el-tag>
          </div>
          <div class="detail-item">
            <span class="detail-label">分类</span>
            <span class="detail-value">{{ detail.categoryName }}</span>
          </div>
        </div>
      </div>

      <!-- 值信息卡片 -->
      <div class="detail-card">
        <h3 class="card-title">参数值</h3>
        <div class="value-section">
          <div class="value-item current">
            <div class="value-label">当前值</div>
            <div class="value-content">{{ detail.currentValue || '—' }}</div>
          </div>
          <div class="value-item">
            <div class="value-label">默认值</div>
            <div class="value-content default">{{ detail.defaultValue || '—' }}</div>
          </div>
        </div>
      </div>

      <!-- 描述卡片 -->
      <div class="detail-card" v-if="detail.description">
        <h3 class="card-title">描述</h3>
        <p class="description-text">{{ detail.description }}</p>
      </div>

      <!-- 环境值卡片 -->
      <div class="detail-card" v-if="Array.isArray(detail.environmentValues) && detail.environmentValues.length">
        <h3 class="card-title">环境配置</h3>
        <div class="env-list">
          <div v-for="env in detail.environmentValues" :key="env.environment" class="env-item">
            <div class="env-header">
              <span class="env-name">{{ env.environment }}</span>
              <el-tag size="small" :type="env.isActive ? 'success' : 'info'">
                {{ env.isActive ? '启用' : '禁用' }}
              </el-tag>
            </div>
            <div class="env-value">{{ env.value }}</div>
          </div>
        </div>
      </div>

      <!-- 时间信息卡片 -->
      <div class="detail-card">
        <h3 class="card-title">时间信息</h3>
        <div class="time-info">
          <div class="time-item">
            <span class="time-label">创建时间</span>
            <span class="time-value">{{ detail.createTime || '—' }}</span>
          </div>
          <div class="time-item">
            <span class="time-label">更新时间</span>
            <span class="time-value">{{ detail.updateTime || '—' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getDefinitionDetail } from '@/assets/api/mobile'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const detail = ref({})
const id = route.params.id

const normalizeObj = (res) => {
  if (res?.data?.data) return res.data.data
  if (res?.data) return res.data
  return res || {}
}

const loadDetail = async () => {
  try {
    const res = await getDefinitionDetail(id)
    detail.value = normalizeObj(res)
  } catch (e) {
    ElMessage.error('获取详情失败')
  }
}

const goList = () => {
  // 尝试从当前路由状态获取来源页面信息
  const referrer = router.options.history.state?.back
  
  // 如果来自定义列表页面，尝试保持原有的分类筛选
  if (referrer && referrer.includes('/param-engine/definitions')) {
    router.back()
  } else {
    // 默认返回参数列表页面
    router.push('/param-engine/definitions')
  }
}

const goValues = () => {
  router.push(`/param-engine/values?paramId=${id}`)
}

onMounted(loadDetail)
</script>

<style scoped>
.definition-detail { position: relative; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn {
  padding: 6px;
}

.card-header {
  font-weight: 600;
}

/* 桌面端可见 */
.desktop-only { display: block; }
/* 移动端隐藏 */
.mobile-only { display: none; }

/* 移动端详情卡片样式 */
.detail-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-label {
  font-size: 14px;
  color: #8c8c8c;
  min-width: 80px;
}

.detail-value {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.key-value {
  font-family: 'Monaco', 'Consolas', monospace;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 参数值样式 */
.value-section {
  display: flex;
  gap: 12px;
}

.value-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.value-item.current {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  border: 1px solid #b7eb8f;
}

.value-label {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 6px;
}

.value-content {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  word-break: break-all;
}

.value-content.default {
  color: #8c8c8c;
}

/* 描述样式 */
.description-text {
  font-size: 14px;
  line-height: 1.6;
  color: #595959;
  margin: 0;
}

/* 环境配置样式 */
.env-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.env-item {
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 3px solid #1890ff;
}

.env-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.env-name {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.env-value {
  font-size: 13px;
  color: #595959;
  font-family: 'Monaco', 'Consolas', monospace;
  word-break: break-all;
}

/* 时间信息样式 */
.time-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.time-item:last-child {
  border-bottom: none;
}

.time-label {
  font-size: 14px;
  color: #8c8c8c;
}

.time-value {
  font-size: 13px;
  color: #595959;
}

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}
</style>






